Progresīvās tīmekļa lietotnes kopīgošanas mērķa apdarinātājs: pielāgota kopīgošanas datu apstrāde

Web Share Target API ļauj progresīvajām tīmekļa lietotnēm (PWA) nevainojami integrēties ar lietotāju ierīču vietējām kopīgošanas iespējām. Tas ļauj jūsu PWA saņemt datus, kas tiek kopīgoti no citām lietotnēm, piemēram, tekstu, attēlus vai URL, un apstrādāt tos pielāgotā veidā. Šī rokasgrāmata padziļināti apskata kopīgošanas mērķa apdarinātāju izveidi un izmantošanu jūsu PWA, koncentrējoties uz pielāgotu kopīgošanas datu apstrādi, lai uzlabotu lietotāju pieredzi.

Izpratne par Web Share Target API un PWA

Progresīvās tīmekļa lietotnes izmanto modernas tīmekļa tehnoloģijas, lai sniegtu vietējai lietotnei līdzīgu pieredzi. Tās ir uzticamas, ātras un saistošas, ļaujot lietotājiem tām piekļūt tieši no sākuma ekrāna. Web Share Target API paplašina šo funkcionalitāti, padarot PWA vēl daudzpusīgākas, ļaujot tām darboties kā mērķiem kopīgotam saturam no citām lietojumprogrammām.

Galvenie jēdzieni

• Tīmekļa lietotnes manifests: PWA sirds, kas definē metadatus par jūsu lietotni, ieskaitot kopīgošanas mērķa konfigurāciju.
• Kopīgošanas mērķa apdarinātājs: JavaScript kods, kas pārtver un apstrādā datus, kas kopīgoti ar jūsu PWA.
• Kopīgošanas dati: Informācija, kas saņemta no kopīgošanas lietotnes, piemēram, teksts, attēli vai URL.
• Darbības joma: Definē, kuriem URL PWA var apstrādāt kopīgotos datus.

Kopīgošanas mērķa iestatīšana tīmekļa lietotnes manifestā

Pirmais solis ir konfigurēt jūsu kopīgošanas mērķi web lietotnes manifestā. Šis JSON fails pārlūkprogrammai norāda informāciju par jūsu PWA, ieskaitot to, kā tai jāapstrādā kopīgošanas pieprasījumi. Jūsu manifesta share_target dalībnieks ir izšķirošs.

            {
  "name": "My Awesome App",
  "short_name": "AwesomeApp",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "/images/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/images/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "share_target": {
    "action": "/share-target-handler",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "image",
          "accept": ["image/*"]
        }
      ]
    }
  }
}

            

              
                Copy
              
            
          

Paskaidrojums:

• action: Jūsu PWA galapunkta URL, kas apstrādās kopīgotos datus (piemēram, /share-target-handler).
• method: HTTP metode, ko izmanto kopīgošanas pieprasījumam (parasti POST).
• enctype: Norāda, kā tiek kodēti formas dati (multipart/form-data ir izplatīts failu augšupielādei).
• params: Apraksta sagaidāmos datu parametrus. Šeit jūs deklarējat, kāda veida datus sagaidāt saņemt no kopīgošanas lietojumprogrammas.
• title: Kopīgotā satura nosaukums.
• text: Kopīgošanas teksta saturs.
• url: Ar kopīgošanu saistīts URL.
• files: Failu specifikāciju masīvs, ko izmanto kopīgotu attēlu vai citu failu apstrādei. name ir veids, kā jūs identificējat failu savā apdarinātājā. accept norāda atļautos failu tipus (piemēram, image/* jebkuram attēlam).

Kopīgošanas mērķa apdarinātāja veidošana (JavaScript)

Kad esat konfigurējis savu manifestu, jūs izveidosiet JavaScript kodu, kas apstrādā kopīgotos datus. Tas parasti ietver POST pieprasījuma apstrādi, kas nosūtīts uz jūsu action URL. To var izdarīt servera pusē ar ietvaru, piemēram, Node.js, vai servisa pavedienā klienta pusē, ja veidojat ļoti mazu, vienkāršu apdarinātāju.

Pamata teksta un URL apstrādes piemērs

Šeit ir pamata piemērs, izmantojot servera puses pieeju (Node.js ar Express), kas uztver tekstu un URL:

            
// server.js (Node.js with Express)
const express = require('express');
const multer = require('multer'); // For handling multipart/form-data
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Configure multer for file uploads
const port = 3000;

app.use(express.static('public')); // Serve static assets

// Parse URL-encoded bodies
app.use(express.urlencoded({ extended: true }));


app.post('/share-target-handler', upload.any(), (req, res) => {
    // Access shared data from req.body
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;

    console.log('Shared Title:', title);
    console.log('Shared Text:', text);
    console.log('Shared URL:', url);

    // Process the shared data as needed (e.g., save to a database, display on a page)
    res.send(`
        
Share Received!
        
Title: ${title || 'None'}
        
Text: ${text || 'None'}
        
URL: ${url || 'None'}
    `);
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

            

              
                Copy
              
            
          

Paskaidrojums:

• Mēs izmantojam Node.js serveri ar Express, lai izveidotu vienkāršu lietojumprogrammu, kas izmanto `multer` bibliotēku multipart/form-data.
• Maršruts `/share-target-handler` apstrādā POST pieprasījumus.
• Apdarinātājs no pieprasījuma pamatteksta izgūst title, text un url parametrus.
• Pēc tam kods reģistrē datus konsolē un attēlo tos vienkāršā HTML lapā.

Attēlu apstrādes piemērs

Uzlabosim mūsu apdarinātāju, lai apstrādātu attēlu failus. Modificējiet servera kodu, kā norādīts zemāk:

            
// server.js (Node.js with Express, extended)
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs');

const app = express();
const upload = multer({ dest: 'uploads/' }); // Configure multer for file uploads
const port = 3000;

app.use(express.static('public')); // Serve static assets, including the uploads directory.

// Parse URL-encoded bodies
app.use(express.urlencoded({ extended: true }));

app.post('/share-target-handler', upload.any(), (req, res) => {
    const title = req.body.title;
    const text = req.body.text;
    const url = req.body.url;
    const files = req.files; // Access the uploaded files

    console.log('Shared Title:', title);
    console.log('Shared Text:', text);
    console.log('Shared URL:', url);
    console.log('Shared Files:', files);

    let imageHtml = '';
    if (files && files.length > 0) {
        files.forEach(file => {
            const imagePath = path.join('/uploads', file.filename);
            imageHtml += ``;
        });
    }

    res.send(`
        
Share Received!
        
Title: ${title || 'None'}
        
Text: ${text || 'None'}
        
URL: ${url || 'None'}
        ${imageHtml}
    `);
});

app.listen(port, () => {
    console.log(`Server listening on port ${port}`);
});

            

              
                Copy
              
            
          

Svarīgas modifikācijas:

• Tagad mēs importējam `multer` pakotni, kas ir atbildīga par vairākdaļu formas datu (ieskaitot failus) parsēšanu.
• `multer` konfigurācija saglabā augšupielādētos failus `uploads` direktorijā (pārliecinieties, ka šī direktorija pastāv jūsu projektā). Argumenta ceļš `dest: 'uploads/'` definē vietējo atrašanās vietu, kur faili tiks saglabāti.
• `req.files` īpašība, ko aizpilda `multer`, saturēs failu objektu masīvu, ja faili tika kopīgoti.
• Attēlu apstrādes sadaļa iterē cauri augšupielādētajiem failiem un katram attēlam renderē `img` tagu. Funkcija `path.join()` izveido pareizo ceļu uz augšupielādētajiem attēliem.
• Izšķiroši ir tas, ka mēs izmantojam `app.use(express.static('public'));`, lai apkalpotu statiskos resursus no mūsu uploads direktorijas. Tas nodrošinās, ka augšupielādes ir publiski pieejamas.

Lai to pārbaudītu, jums būtu jākopīgo attēls no citas lietotnes (piemēram, jūsu ierīces foto galerijas) uz jūsu PWA. Pēc tam kopīgotais attēls tiks parādīts atbildes lapā.

Servisa pavediena integrācija (klienta puses apstrāde)

Sarežģītākiem scenārijiem vai bezsaistes iespējām kopīgošanas mērķa apstrādi var ieviest servisa pavedienā (service worker). Šī pieeja ļauj PWA darboties pat bez aktīva tīkla savienojuma un var nodrošināt lielāku kontroli pār datu apstrādes loģiku. Šis piemērs pieņem, ka jums jau ir reģistrēts servisa pavediens.

            
// service-worker.js
self.addEventListener('fetch', (event) => {
  // Check if the request is for our share target handler
  if (event.request.url.includes('/share-target-handler') && event.request.method === 'POST') {
    event.respondWith(async function() {
      try {
        const formData = await event.request.formData();
        const title = formData.get('title');
        const text = formData.get('text');
        const url = formData.get('url');
        const imageFile = formData.get('image'); // Access the uploaded image file

        console.log('Shared Title (SW):', title);
        console.log('Shared Text (SW):', text);
        console.log('Shared URL (SW):', url);
        console.log('Shared Image (SW):', imageFile); // Handle image file as needed

        // Process the shared data (e.g., store in IndexedDB)
        // Example: Store in IndexedDB
        if (title || text || url || imageFile) {
          await storeShareData(title, text, url, imageFile);  // Assume this is defined.
        }

        return new Response('Share received and processed!', { status: 200 });
      } catch (error) {
        console.error('Error handling share:', error);
        return new Response('Error processing share.', { status: 500 });
      }
    }());
  }

  // Other fetch event handling (e.g., caching, network requests)
  // ...
});

async function storeShareData(title, text, url, imageFile) {
    const dbName = 'shareDataDB';
    const storeName = 'shareStore';
    const db = await new Promise((resolve, reject) => {
        const request = indexedDB.open(dbName, 1);

        request.onerror = (event) => {
            reject(event.target.error);
        };

        request.onsuccess = (event) => {
            resolve(event.target.result);
        };

        request.onupgradeneeded = (event) => {
            const db = event.target.result;
            if (!db.objectStoreNames.contains(storeName)) {
                db.createObjectStore(storeName, { autoIncrement: true });
            }
        };
    });

    const transaction = db.transaction(storeName, 'readwrite');
    const store = transaction.objectStore(storeName);

    const data = {
        title: title,
        text: text,
        url: url,
        timestamp: Date.now()
    };

    if (imageFile) {
        const reader = new FileReader();
        reader.onload = (event) => {
           data.image = event.target.result;
           store.add(data);
        };

        reader.onerror = (event) => {
            console.error("Error reading image file:", event.target.error);
        };
        reader.readAsDataURL(imageFile);
    } else {
        store.add(data);
    }

    await new Promise((resolve, reject) => {
        transaction.oncomplete = resolve;
        transaction.onerror = reject;
    });
}

            

              
                Copy
              
            
          

Paskaidrojums:

• Servisa pavediens pārtver fetch notikumus.
• Tas pārbauda, vai pieprasījums ir POST uz jūsu kopīgošanas mērķa apdarinātāja URL (/share-target-handler).
• Servisa pavediens izmanto event.request.formData(), lai parsētu kopīgotos datus.
• Tas izgūst datu laukus (virsrakstu, tekstu, URL un attēlu). Fails tiek apstrādāts kā Blob.
• Kopīgotie dati pēc tam tiek apstrādāti pašā servisa pavedienā. Šajā piemērā dati tiek glabāti IndexedDB.
• Kods nodrošina funkciju storeShareData() (kas var atrasties citur jūsu koda bāzē), lai saglabātu kopīgošanas datus IndexedDB.

Svarīgi apsvērumi saistībā ar servisa pavedieniem:

• Asinhronas darbības: Servisa pavedieni darbojas asinhroni, tādēļ jebkuras darbības (piemēram, piekļuve IndexedDB) jāapstrādā ar async/await vai solījumiem (promises).
• Darbības joma: Servisa pavedieniem ir darbības joma, un visiem piekļūstamajiem resursiem jābūt šajā jomā (vai jābūt pieejamiem caur CORS, ja avots ir ārējs).
• Bezsaistes funkcionalitāte: Servisa pavedieni ļauj PWA darboties bezsaistē. Kopīgošanas mērķus joprojām var izmantot pat tad, ja ierīcei nav tīkla savienojuma.

Lietotāja pieredzes pielāgošana

Iespēja pielāgot, kā tiek apstrādāti kopīgotie dati, paver durvis bagātākai lietotāja pieredzei. Šeit ir dažas idejas, ko apsvērt:

• Satura apkopošana: Ļaujiet lietotājiem apkopot saites vai teksta fragmentus no dažādiem avotiem jūsu PWA. Piemēram, ziņu apkopotājs varētu ļaut lietotājiem kopīgot rakstus tieši savā lasīšanas sarakstā.
• Attēlu rediģēšana un uzlabošana: Nodrošiniet pamata attēlu rediģēšanas funkcijas pēc attēla kopīgošanas jūsu lietotnē, ļaujot lietotājiem modificēt attēlus pirms to saglabāšanas vai tālākas kopīgošanas. Tas var būt noderīgi attēlu bāzes lietotnēm, kas ļauj lietotājiem pievienot anotācijas vai ūdenszīmes.
• Sociālo mediju integrācija: Ļaujiet lietotājiem iepriekš aizpildīt sociālo mediju ierakstus jūsu PWA ar kopīgotu saturu. To var izmantot rakstu kopīgošanai vai attēlu kopīgošanai sociālo mediju platformās.
• Saglabāšana bezsaistē: Saglabājiet kopīgotos datus lokāli (piemēram, izmantojot IndexedDB), lai lietotāji varētu tiem piekļūt pat bez interneta savienojuma. Tas ir nenovērtējami lietotājiem apgabalos ar ierobežotu savienojamību.
• Kontekstuālas darbības: Pamatojoties uz kopīgoto datu veidu, piedāvājiet lietotājam konkrētas darbības vai ieteikumus. Piemēram, ja tiek kopīgots URL, PWA varētu piedāvāt to pievienot lasīšanas sarakstam vai ieteikt saistītu saturu.

Dažādu kopīgošanas veidu apstrāde

params manifestā ļauj norādīt dažādus accept tipus dažādiem failu formātiem. Šeit ir daži piemēri:

• Attēli: "accept": ["image/*"] pieņems visus attēlu tipus.
• Konkrēti attēlu tipi: "accept": ["image/png", "image/jpeg"] pieņems tikai PNG un JPEG attēlus.
• Video: "accept": ["video/*"] pieņems visus video tipus.
• Audio: "accept": ["audio/*"] pieņems visus audio tipus.
• PDF: "accept": ["application/pdf"] pieņems PDF dokumentus.
• Vairāki tipi: "accept": ["image/*", "video/*"] pieņems gan attēlus, gan video.

Jūsu kopīgošanas mērķa apdarinātājam jābūt uzrakstītam tā, lai tas apstrādātu visus jūsu norādītos tipus. Ja jūsu apdarinātājs neapstrādā visus kopīgošanas tipus, kopīgošanas lietotne var nedarboties pareizi. Jums būs jāpievieno loģika, lai atbilstoši apstrādātu katru faila tipu. Piemēram, jūs varētu izmantot dažādas bibliotēkas atkarībā no augšupielādētā faila veida.

Papildu tehnikas un apsvērumi

Kļūdu apstrāde

Vienmēr ieviest robustu kļūdu apstrādi. Kopīgošanas mērķa operācijas var neizdoties tīkla problēmu, nepareizu datu vai negaidītu failu formātu dēļ. Nodrošiniet informatīvus kļūdu ziņojumus lietotājam un graciozi apstrādājiet kļūmes. Izmantojiet `try...catch` blokus savā servisa pavedienā un servera puses kodā, lai pārvaldītu potenciālās kļūdas. Reģistrējiet kļūdas konsolē atkļūdošanas nolūkos.

Drošības apsvērumi

• Datu validācija: Vienmēr validējiet datus, ko saņemat no kopīgošanas pieprasījumiem. Sanitizējiet un filtrējiet ievadi, lai novērstu drošības ievainojamības, piemēram, starpvietņu skriptēšanas (XSS) uzbrukumus.
• Faila lieluma ierobežojumi: Ieviest faila lieluma ierobežojumus, lai novērstu ļaunprātīgu izmantošanu un resursu izsmelšanu. Konfigurējiet faila lieluma ierobežojumus savā servera puses kodā un/vai servisa pavedienā.
• Piekļuves kontrole: Ja jūsu PWA apstrādā sensitīvus datus, ieviest atbilstošus piekļuves kontroles mehānismus, lai ierobežotu, kas var kopīgot datus un kā tie tiek apstrādāti. Apsveriet lietotāja autentifikācijas pieprasīšanu.

Lietotāju privātums

Esiet uzmanīgi attiecībā uz lietotāju privātumu. Pieprasiet tikai nepieciešamos datus un esiet caurspīdīgi par to, kā jūs izmantojat kopīgoto informāciju. Iegūstiet lietotāja piekrišanu, ja nepieciešams, un ievērojiet attiecīgos datu privātuma noteikumus (piemēram, GDPR, CCPA).

Lokalizācija un internacionalizācija (i18n)

Apsveriet globālo auditoriju. Nodrošiniet, ka jūsu PWA atbalsta vairākas valodas un reģionālos iestatījumus. Izmantojiet internacionalizācijas tehnikas, piemēram, `Intl` API JavaScript, lai pareizi apstrādātu datumus, skaitļus un valūtas. Tulkojiet visu lietotājam redzamo tekstu savā lietotnē, ieskaitot kļūdu ziņojumus un apstiprinājuma uzvednes.

Testēšana un atkļūdošana

• Testēšana dažādās ierīcēs un pārlūkprogrammās: Rūpīgi pārbaudiet savu kopīgošanas mērķa apdarinātāju dažādās ierīcēs un pārlūkprogrammās, lai nodrošinātu saderību un konsekventu uzvedību.
• Pārlūkprogrammas izstrādātāju rīki: Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai pārbaudītu tīkla pieprasījumus, atkļūdotu JavaScript kodu un identificētu problēmas.
• Servisa pavediena atkļūdošana: Izmantojiet servisa pavediena atkļūdotāju savas pārlūkprogrammas izstrādātāju rīkos, lai pārbaudītu servisa pavediena darbību, reģistrētu ziņojumus un novērstu problēmas.
• Manifesta validācija: Validējiet savu manifesta failu, lai pārliecinātos, ka tas ir pareizi formatēts. Ir pieejami daudzi tiešsaistes manifesta validatori.

Lietošanas piemēri no visas pasaules

• Attēlu kopīgošana radošajiem profesionāļiem (Japāna): Fotoattēlu rediģēšanas PWA ļauj fotogrāfiem kopīgot attēlus no savas kameras ruļļa tieši redaktorā, ļaujot viņiem ātri pielietot filtrus vai veikt citas korekcijas.
• Rakstu saglabāšana lasītājiem (Indija): Ziņu apkopotāja PWA ļauj lietotājiem kopīgot rakstus no tīmekļa pārlūkprogrammām tieši lasīšanas sarakstā, ļaujot tos apskatīt bezsaistē.
• Ātra piezīmju veikšana izglītības iestādēs (Vācija): Piezīmju veikšanas PWA ļauj studentiem kopīgot teksta fragmentus vai vietņu saites no citām lietojumprogrammām, lai ātri izveidotu piezīmes lekciju laikā.
• Sadarbība ar dokumentiem (Brazīlija): Sadarbības dokumentu rediģēšanas PWA ļauj lietotājiem kopīgot tekstu un attēlus no citām lietojumprogrammām ātrai sadarbībai.

Noslēgums

Kopīgošanas mērķa apdarinātāju ieviešana jūsu PWA ir spēcīgs veids, kā uzlabot lietotāju iesaisti un nevainojami integrēties ar lietotāju ierīču vietējām kopīgošanas iespējām. Sekojot sniegtajām vadlīnijām un piemēriem, jūs varat izveidot PWA, kas piedāvā labāku lietotāja pieredzi plašā ierīču un platformu klāstā visā pasaulē. Ieviešot šīs funkcijas, atcerieties ņemt vērā lietotāja pieredzi, drošību un privātumu. Nepārtraukta testēšana un uzlabošana, balstoties uz lietotāju atsauksmēm, ir izšķiroša veiksmīgai ieviešanai.

Izmantojot Web Share Target API priekšrocības, jūs varat izveidot patiesi pārliecinošas un lietotājam draudzīgas PWA, kas izceļas pārpildītā digitālajā ainavā. Veiksmi, un priecīgu kodēšanu!